<template>
    <div>
        <div style="height:150px; background:blue;">
          banner
        </div>
        <ul class="nav">
          <router-link to="/home" tag="li" active-class="on">首页</router-link>
          <router-link to="/hot" tag="li" active-class="on">热门</router-link>
          <router-link to="/about" tag="li" active-class="on">我的</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
  data(){
    return {
    }
  },
  methods:{
  },
  
}
</script>

<style lang="scss">
    .nav {
      display: flex;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      li {
        flex: 1;
        text-align: center;
        line-height: 40px;
      }
    }
    .on{
      background: blue;
      color: white
    }
</style>
